<template>
  <div>
    <div class="recommend-title">热销推荐</div>
    <router-link
      class="recomment-content"
      v-for="item in recommendList"
      :key="item.id"
      :to="'/detail/' + item.id"
      tag="div"
    >
      <img class="recommend-img" :src="item.imgUrl" alt="">
      <div class="recommend-rightcontent">
        <div class="recommend-rightcontent-item">
          <h3 class="recommend-contitle">{{ item.title }}</h3>
          <p class="recommend-contrad">{{ item.infoText }}</p>
          <button class="recommend-more">查看详情</button>
        </div>
      </div>
    </router-link>
    <div class="recommend-lookall">查看所有产品</div>
  </div>
</template>

<script>
export default {
  name: 'HomrRecommend',
  props: {
    recommendList: Array
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  .recommend-title
    font-size: .30rem
    color: $baseTextColor
    height: .7rem
    line-height: .7rem
    padding-left: .20rem
    background: #fff
  .recomment-content
    height: 1.9rem
    display: flex
    overflow: hidden
    border-bottom: 1px solid #f7f7f7
    background-color: #fff
    .recommend-img
      width: 1.7rem
      height: 1.7rem
      padding: .1rem
    .recommend-rightcontent
      display: flex
      flex: 1
      align-items: center
      height: 1.9rem
      padding-right: .1rem
      overflow: hidden
      .recommend-rightcontent-item
        padding-left: .1rem
        position: relative
        height: 1.4rem
        overflow hidden
        .recommend-contitle
          font-size: .32rem
          font-weight: bold
          padding-bottom: .15rem
          ellipsis()
        .recommend-contrad
          color: #ccc
          ellipsis()
        .recommend-more
          position: absolute
          bottom: 0
          padding: 0 .2rem
          border-radius: .06rem
          background: #ff9300
          color: #fff
          font-weight: bold
          font-size: .26rem
  .recommend-lookall
    padding: .3rem 0
    text-align: center
    color: $bgColor
    font-weight: bold
    font-size: .30rem
    background-color: #fff
</style>
